<template>
  <div class="cart">
    <Header title="购物车" :edit="true"/>
    <CartDetail v-if="isShow" :changeShow="changeShow" />
    <Empty v-else />
    <Footer />
    
  </div>
</template>

<script>
import Footer from '@/components/Footer.vue';
import Empty from '@/components/Empty.vue';
import Header from '@/components/header.vue';
import CartDetail from './components/cartDetail.vue';
import { onMounted, ref } from 'vue';
import { useStore } from 'vuex';
export default {
  components: {
    Footer,
    Empty,
    Header,
    CartDetail,
  },
  setup(){ 
    const isShow = ref(true)
    const store = useStore()
    const changeShow = () => {
      isShow.value = false 
    }
    const init = () => {
      if (store.state.cartList.length === 0) { 
        isShow.value = false
      }
    }

    onMounted(() => {
      init()
    })

    return {
      isShow,
      changeShow,
    }
  }
}
</script>

<style scoped lang="less">
.cart {
  display: flex;
  flex-flow: column;
  height: 100%;

  .content {
    flex: 1;
    overflow-y: auto;
  }
}
</style>